<template>
    <div class="app-container">
        <el-form ref="queryForm" :model="queryForm" label-width="100px" :inline="true">
            <el-form-item label="专项选择">
                <el-cascader v-model="subjectValue" :options="subjectList" :props="{ expandTrigger: 'hover',children:'twoList',label:'dictLabel',value:'dictValue' }" @change="handleChange" clearable size="small" style="300px"></el-cascader>
            </el-form-item>
            <el-form-item label="训练手段" prop="trainingMode">
                <el-select v-model="queryForm.trainingMode" placeholder="请选择训练手段" clearable size="small" @change="changeMode">
                    <el-option v-for="trainingWay in trainingModeOptions" :key="trainingWay.value" :label="trainingWay.label" :value="trainingWay.value" />
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="组数" prop="groupNumber">
               <input type="text" v-model="queryForm.groupNumber">
            </el-form-item> -->
            <el-form-item v-if="queryForm.trainingMode=='0'" label="目标选择" prop="targetValue">
                <el-select v-model="queryForm.targetValue" placeholder="请选择公里数" clearable size="small">
                    <el-option v-for="item in meterOptions" :key="item.dictValue" :label="item.remark" :value="item.dictValue" />
                </el-select>
            </el-form-item>
            <el-form-item v-else-if="form.trainingMode=='1'" label="目标选择" prop="targetValue">
                <el-select v-model="queryForm.targetValue" placeholder="请选择时间" clearable size="small">
                    <el-option v-for="item in timeMeansOptions" :key="item.dictValue" :label="item.remark" :value="item.dictValue" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['training:trainingDay:add']">新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['training:sportsmanBodyFunction:edit']">修改</el-button>
            </el-col>
            <!-- <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['training:trainingDay:remove']">删除
                </el-button>
            </el-col> -->
        </el-row>
        <el-table ref="schemeTable" v-loading="loading" :data="schemeList" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
            <el-table-column type="selection" width="55" align="center" />
            <!--            <el-table-column label="PK" align="center" prop="id"/>-->
            <el-table-column label="方案名称" align="center" prop="name" />
            <el-table-column label="专项训练" align="center" prop="firstLevelName" />
            <el-table-column label="二级科目" align="center" prop="secondLevelName" />
            <el-table-column label="训练手段" align="center" prop="trainingMode" />
            <el-table-column label="目标" align="center" prop="targetValue" />
            <el-table-column label="间歇时间" align="center" prop="intervalTime" />
            <el-table-column label="组数" align="center" prop="groupNumber" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" class="link-type" @click="handleSee(scope)">查看
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination v-show="total>10" :total="total" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize" @pagination="getSchemeList" />
        <!-- 方案详情 -->
        <el-card class="details-box" v-if="schemeDetails.schemeDetailsList!=null">
            <div class="name mb20">方案名称：{{schemeDetails.name}}</div>
            <div v-for="(item,index) in schemeDetails.schemeDetailsList" :key="item.id">
                <div class="details-header">第{{index+1}}组</div>
                <div class="details-row">
                    <div class="label">课程要求</div>
                    <div class="col">男</div>
                    <div class="col">女</div>
                </div>
                <div class="details-row">
                    <div class="label">总成绩</div>
                    <div class="col">{{item.achievementMale}}</div>
                    <div class="col">{{item.achievementFemale}}</div>
                </div>
                <div class="details-row">
                    <div class="label">桨频</div>
                    <div class="col">{{item.pulpMale}}</div>
                    <div class="col">{{item.pulpFemale}}</div>
                </div>
                <div class="details-row" v-if="schemeDetails.firstLevel=='land_specific_training_dynamometer'">
                    <div class="label">平均/500m</div>
                    <div class="col">{{item.powerMale}}</div>
                    <div class="col">{{item.powerFemale}}</div>
                </div>
                <div class="details-row">
                    <div class="label">心率</div>
                    <div class="col">{{item.heartRateMale}}</div>
                    <div class="col">{{item.heartRateFemale}}</div>
                </div>
            </div>
        </el-card>
        <!-- 新增或修改弹框 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" append-to-body width="70%" @close="cancel">
            <el-form ref="form" :model="form" :rules="rules" label-width="110px" :inline="true" class="form" v-loading="loading2">
                <el-row>
                    <el-form-item label="方案名称" prop="name" style="width:320px">
                        <el-input v-model="form.name" placeholder="请输入方案名称" />
                    </el-form-item>
                    <el-form-item label="专项选择" prop="firstLevel" style="320px">
                        <el-cascader v-model="subjectValue2" :options="subjectList" :props="{ expandTrigger: 'hover',children:'twoList',label:'dictLabel',value:'dictValue' }" @change="handleChange2" clearable size="small" style="180px" ref="subjectRef"></el-cascader>
                    </el-form-item>
                    <el-form-item label="间歇时间(分钟)" prop="intervalTime" size="small" style="width:350px;" label-width="130px">
                        <el-input v-model.number="form.intervalTime" placeholder="输入间歇时间" style="width:180px" />
                    </el-form-item>
                </el-row>
                <el-form-item label="训练手段" prop="trainingMode" style="width:320px;">
                    <el-select v-model="form.trainingMode" placeholder="请选择训练手段" clearable size="small" @change="changeMode2" style="width:180px">
                        <el-option v-for="trainingWay in trainingModeOptions" :key="trainingWay.value" :label="trainingWay.label" :value="trainingWay.value" />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="form.trainingMode=='0'" label="目标选择" prop="targetValue" style="width:320px;">
                    <el-select v-model="form.targetValue" placeholder="请选择公里数" clearable size="small" style="width:180px">
                        <el-option v-for="item in meterOptions" :key="item.dictValue" :label="item.remark" :value="item.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item v-else-if="form.trainingMode=='1'" label="目标选择" prop="targetValue" style="width:320px;">
                    <el-select v-model="form.targetValue" placeholder="请选择时间" clearable size="small" style="width:180px">
                        <el-option v-for="item in timeMeansOptions" :key="item.dictValue" :label="item.remark" :value="item.dictValue" />
                    </el-select>
                </el-form-item>

                <el-form-item label="组数选择" prop="groupNumber" style="width:350px;" label-width="120px">
                    <el-select v-model="form.groupNumber" placeholder="请选择组数" clearable size="small" style="width:180px" @change="changeGroup">
                        <el-option v-for="item in groupNumberOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <!-- 训练组要求 -->
                <div v-for="(item,index) in form.schemeDetailsList" :key="index" class="groupBox">
                    <div class="groupName">第{{index+1}}组</div>
                    <el-row>
                        <el-form-item label="总成绩(男)" :prop="'schemeDetailsList.'+index+'.achievementMale'" size="small" style="width:290px;">
                            <el-input v-model="item.achievementMale" placeholder="男子总成绩" style="width:180px" />
                        </el-form-item>
                        <el-form-item label="桨频(男)" :prop="'schemeDetailsList.'+index+'.pulpMale'" size="small" style="width:290px;">
                            <el-input v-model="item.pulpMale" placeholder="男子桨频" style="width:180px" />
                        </el-form-item>
                        <el-form-item v-if="form.firstLevel==='land_specific_training_dynamometer'" label="平均/500m(男)" :prop="'schemeDetailsList.'+index+'.powerMale'" size="small" style="width:290px;">
                            <el-input v-model="item.powerMale" placeholder="男子平均/500m" style="width:180px" />
                        </el-form-item>
                        <el-form-item label="心率(男)" :prop="'schemeDetailsList.'+index+'.heartRateMale'" size="small" style="width:290px;">
                            <el-input v-model="item.heartRateMale" placeholder="男子心率" style="width:180px" />
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="总成绩(女)" :prop="'schemeDetailsList.'+index+'.achievementFemale'" size="small" style="width:290px;">
                            <el-input v-model="item.achievementFemale" placeholder="女子总成绩" style="width:180px" />
                        </el-form-item>
                        <el-form-item label="桨频(女)" :prop="'schemeDetailsList.'+index+'.pulpFemale'" size="small" style="width:290px;">
                            <el-input v-model="item.pulpFemale" placeholder="女子桨频" style="width:180px" />
                        </el-form-item>
                        <el-form-item v-if="form.firstLevel==='land_specific_training_dynamometer'" label="平均/500m(女)" :prop="'schemeDetailsList.'+index+'.powerFemale'" size="small" style="width:290px;">
                            <el-input v-model="item.powerFemale" placeholder="女子平均/500m" style="width:180px" />
                        </el-form-item>
                        <el-form-item label="心率(女)" :prop="'schemeDetailsList.'+index+'.heartRateFemale'" size="small" style="width:290px;">
                            <el-input v-model="item.heartRateFemale" placeholder="女子心率" style="width:180px" />
                        </el-form-item>
                    </el-row>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { subjectLevelTree } from "@/api/training/trainingDay";
import { schemeList, schemeDetails, addScheme, editScheme, deleteScheme } from "@/api/training/scheme";
export default {
    name: "trainingScheme",
    data() {
        return {
            // 遮罩层
            loading: false,
            loading2: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 方案列表
            schemeList: [],
            // 训练科目级联列表
            subjectList: [],
            // 选中的一级科目、二级科目
            subjectValue: [],
            //训练周名称集合
            weekNameList: [],
            //训练模式
            trainingModeOptions: [
                { value: 0, label: '公里数' },
                { value: 1, label: '时间' }
            ],
            // 公里数（米）选项集合
            meterOptions: [],
            // 时间选项集合
            timeMeansOptions: [],
            // 查询参数
            queryForm: {
                pageNum: 1,
                pageSize: 10,
                name: '',
                firstLevel: "",
                secondLevel: "",
                trainingMode: "",
                targetValue: '',
                groupNumber: ''
            },
            // 方案详情
            schemeDetails: '',
            // 弹出层标题
            title: "",
            form: '',
            dialogVisible: false,
            // 弹框科目级联选择值
            subjectValue2: [],
            //组数选择
            groupNumberOptions: [
                { value: 1, label: '1组' },
                { value: 2, label: '2组' },
                { value: 3, label: '3组' },
                { value: 4, label: '4组' },
                { value: 5, label: '5组' },
                { value: 6, label: '6组' },
                { value: 7, label: '7组' },
                { value: 8, label: '8组' },
                { value: 9, label: '9组' },
                { value: 10, label: '10组' }
            ],
            rules: {
                name: [{ required: true, message: '请输入方案名称', trigger: 'blur' }],
                firstLevel: [{ required: true, message: '请选择训练科目', trigger: 'blur' }],
                trainingMode: [{ required: true, message: '请选择训练手段', trigger: 'blur' }],
                targetValue: [{ required: true, message: '请选择目标', trigger: 'blur' }],
                groupNumber: [{ required: true, message: '请选择组数', trigger: 'blur' }],
                intervalTime: [
                    { required: true, message: "请输入间歇时间", trigger: "blur" },
                    { type: 'number', message: "请输入纯数字", trigger: "blur" }
                ],
            },
            rowIndex: ''
        };
    },
    watch: {

    },
    created() {
        //训练时间手段字典
        this.getDicts("time_means").then(response => {
            this.timeMeansOptions = response.data;
            console.log(this.timeMeansOptions)
        });
        this.getDicts("kilometer").then(response => {
            this.meterOptions = response.data;
            console.log(this.meterOptions)
        });
        this.getSubjectLevelList();
        this.getSchemeList();
    },
    methods: {
        // 一级科目二级科目级联选择
        handleChange(value) {
            this.queryForm.firstLevel = value[0]
            this.queryForm.secondLevel = value[1]
        },
        // 查询参数中改变训练模式，清空之前的目标值
        changeMode() {
            this.queryForm.targetValue = ''
        },
        // 获取训练科目列表
        getSubjectLevelList() {
            subjectLevelTree().then((response) => {
                this.subjectList = response.data.slice(0, 2)
                console.log(this.subjectList)
            })
        },
        // 获取训练方案列表
        getSchemeList() {
            this.loading = true
            schemeList(this.queryForm).then((response) => {
                if (response.code == '200') {
                    this.total = response.total;
                    this.schemeList = response.rows;
                    this.loading = false
                } else {
                    this.msgError('请求失败');
                    this.loading = false
                }
            })
        },
        // 搜索按钮操作
        handleQuery() {
            this.queryForm.pageNum = 1;
            this.getSchemeList()
        },
        // 重置按钮操作
        resetQuery() {
            this.resetForm("queryForm");
            this.subjectValue = []
            this.queryForm.firstLevel = ""
            this.queryForm.secondLevel = ""
            console.log(this.queryForm)
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === this.rowIndex) {
                return 'success-row';
            }
        },
        // 查看按钮操作
        handleSee(scope) {
            this.rowIndex = scope.$index
            console.log(this.rowIndex)
            const id = scope.row.id
            schemeDetails(id).then(response => {
                console.log(response)
                if (response.code == '200') {
                    this.schemeDetails = response.data
                } else {
                    this.msgError('请求失败');
                }
            })
        },
        // 表单重置
        reset() {
            this.form = {
                trainingMode: 0,
                targetValue: undefined,
                groupNumber: undefined,
                name: undefined,
                firstLevel: undefined,
                secondLevel: undefined,
                firstLevelName: undefined,
                secondLevelName: undefined,
                intervalTime: undefined,
                schemeDetailsList: []
            };
            this.subjectValue2 = []
            this.resetForm("form");
        },
        // 新增按钮操作
        handleAdd() {
            this.reset();
            this.dialogVisible = true;
            this.title = "新增方案";
        },
        //  修改按钮操作
        handleUpdate(row) {
            this.reset();
            this.dialogVisible = true;
            this.title = "修改方案";
            const id = row.id || this.ids
            schemeDetails(id).then(response => {
                this.subjectValue2 = [response.data.firstLevel, response.data.secondLevel]
                this.form = response.data;
                // this.form.firstLevel=response.data.firstLevel
                // this.form.secondLevel=response.data.secondLevel
                // console.log(this.form)

            });
        },
        // 删除按钮操作
        handleDelete(row) {
            const ids = row.id || this.ids
            let _this = this
            this.$confirm('是否确认删除方案："' + row.name, "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return deleteScheme(ids).then(response => {
                    if (response.code == 200) {
                        if (response.data == 1) {
                            _this.msgError(response.msg);
                        } else {
                            _this.msgSuccess("删除成功");
                            _this.getSchemeList()
                        }
                    } else {
                        _this.msgError("请求失败");
                    }

                });
            }).catch(function () {
                _this.$message({
                    type: "info",
                    message: "已取消删除"
                });
            });

        },
        // 弹框中选择训练科目
        handleChange2(value) {
            this.form.firstLevel = value[0]
            this.form.secondLevel = value[1]
            this.form.firstLevelName = this.$refs["subjectRef"].getCheckedNodes()[0].pathLabels[0]
            this.form.secondLevelName = this.$refs["subjectRef"].getCheckedNodes()[0].pathLabels[1]
        },
        // 弹框中改变训练模式
        changeMode2() {
            this.form.targetValue = ''
        },
        // 改变训练组数
        changeGroup(value) {
            const num = value
            this.form.schemeDetailsList = []
            for (let i = 0; i < num; i++) {
                const person = {
                    tblSchemeId: undefined,
                    achievementFemale: undefined,
                    achievementMale: undefined,
                    heartRateFemale: undefined,
                    heartRateMale: undefined,
                    powerFemale: undefined,
                    powerMale: undefined,
                    pulpFemale: undefined,
                    pulpMale: undefined,
                }
                // 如果艇种是8人，运动员位置position从0开始，0代表舵手；否则位置从1开始
                this.form.schemeDetailsList.push(person)
            }
        },
        // 取消按钮
        cancel() {
            this.dialogVisible = false;
            this.reset()
        },
        // 确定按钮
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.loading2 = true
                    if (this.form.id != undefined) {
                        editScheme(this.form).then(response => {
                            if (response.code === 200) {
                                this.loading2 = false
                                this.msgSuccess("修改成功");
                                this.dialogVisible = false;
                                this.getSchemeList();
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    } else {
                        console.log(this.form)
                        addScheme(this.form).then(response => {
                            if (response.code === 200) {
                                this.loading2 = false
                                this.msgSuccess("新增成功");
                                this.dialogVisible = false;
                                this.getSchemeList();
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.details-box {
    margin-top: 30px;
    text-align: center;
    .details-header {
        color: #303133;
        font-size: 16px;
        font-weight: bold;
        background: #dcdfe6;
        // border-top: 1px solid #666;
        height: 40px;
        line-height: 40px;
    }
    .details-row {
        display: flex;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #dcdfe6;
        .label {
            border-left: 1px solid #dcdfe6;
            border-right: 1px solid #dcdfe6;
            color: #409eff;
            font-size: 15px;
            // background: #be4a57;
            width: 20%;
        }
        .col {
            border-right: 1px solid #dcdfe6;
            width: 40%;
        }
    }
    .name {
        text-align: left;
        font-size: 16px;
        font-weight: bold;
        color: #606266;
    }
}
.form {
    max-height: 80vh;
    padding-top: 4px;
    overflow-y: auto;
    overflow-x: hidden;
}
.groupBox {
    padding-top: 10px;
    // border:1px solid #EBEEF5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    .groupName {
        color: #409eff;
        font-size: 16px;
        margin: 10px 20px 15px;
    }
}
</style>
<style lang="scss">
.el-table .success-row {
    background: rgba(103, 194, 58, 0.2);
  }
</style>